<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	
	String orderId = request.getParameter("orderId");
	String orderKey = request.getParameter("orderKey");
	
	
	if (orderId == null || orderId.trim().equals("")) {
		request.getRequestDispatcher("/webpay/error/order_invalid.html")
				.forward(request, response);
	}

	if (orderKey == null || orderKey.trim().equals("")) {
		request.getRequestDispatcher("/webpay/error/order_invalid.html")
				.forward(request, response);
	}
	
	request.getSession(true).setAttribute("orderId", orderId);
	request.getSession(true).setAttribute("orderKey", orderKey);
	
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<base href="<%=basePath%>">
<%
	out.write("<script type=\"text/javascript\">var orderId = '"
			+ orderId + "';\nvar orderKey = '" + orderKey
			+ "';</script>");
%>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>订单支付</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"
	charset="UTF-8"></script>

<script type="text/javascript" src="js/core-1.0.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/webpay/order_pay.js"
	charset="UTF-8"></script>
	
<script type="text/javascript">
	getOrderInfo();// 初始化订单信息
	getPayUserInfo();//初始化卡号列表
</script>

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="ace_v1.3/assets/css/bootstrap.css" />

<link rel="stylesheet" href="ace_v1.3/assets/css/chosen.css" />

<!-- text fonts -->
<link rel="stylesheet" href="ace_v1.3/assets/css/ace-fonts.css" />

<link rel="stylesheet" href="ace_v1.3/assets/css/font-awesome.css" />
<link rel="stylesheet" href="css/webpay/core.1.0.css" />
<link rel="stylesheet" href="css/dialog.css" />
<!-- ace styles -->
<link rel="stylesheet" href="ace_v1.3/assets/css/ace.css"
	class="ace-main-stylesheet" id="main-ace-style" />
	


<!--[if lte IE 9]>
			<link rel="stylesheet" href="ace_v1.3/assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="ace_v1.3/assets/css/ace-ie.css" />
		<![endif]-->



<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="ace_v1.3/assets/js/html5shiv.js"></script>
		<script src="ace_v1.3/assets/js/respond.js"></script>
		<![endif]-->

<jsp:include page="head-include.jsp"/>

<style type="text/css">
	.countdown_box{
		position: absolute;
		z-index: 1000;
		width: 100%;
		height: 100%;
		margin: 0;
		top: 0px;
		background: gray;
		opacity:0.9;
		display: none;
	}
	.countdown_content{
		width: 200px;
		height: 70px;
		background: white;
		margin: 0 auto;
		margin-top: 150px;
		line-height: 30px;
		text-align: center;
		
		moz-border-radius: 3px !important;      /* Gecko browsers */
	    -webkit-border-radius: 3px !important;   /* Webkit browsers */
	    border-radius:3px !important;         
	}
	
	.bank_row{
		padding: 3px 5px;
		font-size: 12px;
		font-weight: 600;
	}
</style>
</head>

<body class="no-skin">
	<!-- #section:basics/navbar.layout -->
	<jsp:include page="title.jsp"/>

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">

		<!-- #section:basics/sidebar -->
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<!-- #section:basics/content.breadcrumbs -->
				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">
					<!-- #section:settings.box -->
					<!-- <div class="page-header">
						<h1>
							Form Elements <small> <i
								class="ace-icon fa fa-angle-double-right"></i> Common form
								elements and layouts
							</small>
						</h1>
					</div>
					 -->
					<!-- /.page-header -->
					<!-- <div class="row">
						<div class="col-xs-12 order-desc">
							温馨提示：获取验证码之前请仔细检查各项数据输入是否正确，数据错误将导致该笔订单失效并无法重新支付；如出现上述问题导致订单无法支付，请联系收款商户重新发起收款
						</div>
					</div> -->
					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<form class="form-horizontal" id="orderPayForm" role="form">
								<input type="hidden" name="ORDERKEY">
								<input type="hidden" name="ORDAMT">
								<input type="hidden" name="ORDERID">
								
								<input name="PAY_CHANNELS" value="YIBAO" type="hidden" />
								<input name="PAYTYPE" value="05" type="hidden" />
								<!-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">
										温馨提示 </label>

									<div class="col-xs-12 col-sm-12 prompt">
										获取验证码之前请仔细检查各项数据输入是否正确，数据错误将导致该笔订单失效并无法重新支付；如出现上述问题导致订单无法支付，请联系收款商户重新发起收款
									</div>
								</div> -->
								<!-- #section:elements.form -->
								<!-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">
										商户名称 </label>

									<div class="col-xs-12 col-sm-12">
										<input type="text" name="CUST_NAME" placeholder="商户名称"
											readonly="readonly" validate="true" class="form-control" />
									</div>
								</div> -->

								<!-- <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right">
										商品名称 </label>

									<div class="col-xs-12 col-sm-12">
										<input type="text" name="GOODS_NAME" readonly="readonly"
											placeholder="商品名称" class="form-control" />
									</div>
								</div> -->
								
								<!-- <div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="ORDERID" validate="true"
											readonly="readonly" placeholder="商品订单号" class="form-control" />
									</div>
								</div> -->

								<!-- <div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="ORDAMT" validate="true"
											readonly="readonly" placeholder="订单金额(元)"
											class="form-control" />
									</div>
								</div> -->
								
								<!--<div class ="row card-list-box">
									<div class="col-sm-12 card-list-view">
									
									</div>
								</div> -->
								
								<div class="form-group card-list-box" style="display: none;">
									<!-- <label class="col-sm-3 control-label no-padding-right">
										快速选择银行卡</label> -->

									<div class="col-xs-12 col-sm-12 card-list-view">
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-6 col-xs-6 col-sm-offset-2">
										<select name="CARD_TYPE" onchange="selectCardType();" class="chosen-select form-control">
											<option value="02" selected="selected">信用卡支付</option>
											<option value="01" >储蓄卡支付</option>
										</select>
									</div>
									<div class="col-sm-4 col-xs-6" id="bankList">
										<button class="btn btn-info" type="button" style="height: 30px;">
											<i class="ace-icon" ></i>支持银行
										</button>
									
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="BANKNO" validate="true"
											placeholder="付款银行卡号" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="BUYERNAME" validate="true"
											placeholder="银行卡登记真实姓名" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="CREDCODE" validate="true"
											placeholder="身份证号码" class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="CARD_EXPIRE" validate="true" tips="格式:月月/年年"
											placeholder="银行卡有效期"  RegExp="/(0[1-9]|1[0-2])\/(1[5-9]|[2-9][0-9])/" class="form-control input-mask-date form-control" />
									</div>
								</div>

								<div class="form-group">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="CVV" validate="true" RegExp="/^\d{3}$/"
											placeholder="银行卡背面3位CVV码" class="form-control" />
									</div>
								</div>

								<div class="form-group" id="form_verifyCode" style="display: none;">
									<div class="col-xs-12 col-sm-12">
										<input type="text" name="VERIFYCODE"
											placeholder="短信验证码" class="col-xs-5 col-sm-3 " /> &nbsp;
										<button type="button" class="app-pay-theme btn btn-info check-code "
											style="width: 135px;height: 38px;">获取验证码</button>
									</div>
								</div>
								
								<div class="form-group">
									<div class="checkbox agreement">
										<label>
											<input name="iDo" type="checkbox" checked="checked" value="1"  class="ace" />
											<span class="lbl"> 我已阅读并同意<a href="javascript:void(0)" onclick="readAgreement()">《口袋支付服务协议》</a></span>
										</label>
									</div>
								</div>
								
								<div class="clearfix">
									<button id="btn_pay" class="btn btn-info btn-lg btn-block" type="button"
										  >
										<i class="ace-icon fa fa-check "></i> 付  款
									</button>
								</div>
							</form>
							
							<div class="dialog_list" style="display: none;">
						<div id="bankListBox">
							<div class="tabbable">
								<ul class="nav nav-tabs" id="myTab">
									<li class="active nav-li" onclick="selectCardList(this);">
										<a data-toggle="tab" nav-id="creditCardList"  href="javascript:void(0)">
											信用卡
										</a>
									</li>
									
									<li class="nav-li" onclick="selectCardList(this);">
										<a data-toggle="tab" nav-id="debitCardList"  href="javascript:void(0)" >
											借记卡
										</a>
									</li>
								</ul>

								<div class="tab-content">
									<div id="creditCardList" class="tab-pane fade in active">
										<div class="bank_row">工商银行</div>
										<div class="bank_row">中国银行</div>
										<div class="bank_row">建设银行</div>
										<div class="bank_row">邮政储蓄</div>
										<div class="bank_row">中信银行</div>
										<div class="bank_row">光大银行</div>
										<div class="bank_row">华夏银行</div>
										<div class="bank_row">招商银行</div>
										<div class="bank_row">兴业银行</div>
										<div class="bank_row">浦发银行</div>
										<div class="bank_row">平安银行</div>
										<div class="bank_row">广发银行</div>
										<div class="bank_row">北京银行</div>
										<div class="bank_row">上海银行</div>
										<div class="bank_row">民生银行</div>
										<div class="bank_row">农业银行</div>
									</div>
									
									<div id="debitCardList" class="tab-pane fade in ">
										<div class="bank_row">建设银行</div>
										<div class="bank_row">农业银行</div>
										<div class="bank_row">工商银行</div>
										<div class="bank_row">中国银行</div>
										<div class="bank_row">浦发银行</div>
										<div class="bank_row">光大银行</div>
										<div class="bank_row">平安银行</div>
										<div class="bank_row">兴业银行</div>
										<div class="bank_row">华夏银行</div>
										<div class="bank_row">北京银行</div>
									</div>
								</div>
							</div>
						</div>
					</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->


	</div>
	
	<!-- 跳转倒计时显示层 -->
	<div id="jump_countdown" class="countdown_box">
		<div class="countdown_content">
			
		</div>
	</div>
	<!-- /.main-container -->
	
	<script type="text/javascript" src="js/dialog.js" charset="UTF-8"></script>

	<!-- basic scripts -->
	
	<script type="text/javascript">
		function selectCardType(){
			var $sel = $("*[name='CARD_TYPE']");
			var val = $sel.val();
			var $CARD_EXPIRE = $("input[name='CARD_EXPIRE']");
			var $CVV = $("input[name='CVV']");
			if(val == "01"){//借记卡
				$CARD_EXPIRE.hide();
				$CVV.hide();
				
				$CARD_EXPIRE.attr("validate","false");
				$CVV.attr("validate","false");
			}else{//信用卡
				$CARD_EXPIRE.show();
				$CVV.show();
				
				$CARD_EXPIRE.attr("validate","true");
				$CVV.attr("validate","true");
			}
			
			$("input[name='BANKNO']").val("");//清空卡号
			$CARD_EXPIRE.val("");//清空有效期
			$CVV.val("");//清空cvv码
		}
		selectCardType();
		
		$("#bankList").on("click",function(){
			openDialog({
				title : "收款支持银行列表",
				width:"100%",
				height:"100%",
				target :"#bankListBox"
//				pageUrl :'index.jsp'
			});
		});
		
		/* $(".nav-li").each(function (){
			var $this = $(this);
			$this.on("click",function(){
				alert();
				var href = $a.attr("href");
				alert(href);
				var id = href.substring(href.indexOf("#") + 1);
				
				$(".tabbable li").removeClass("active");
				$(".tab-content").children("div").hide();
				$a.parents("li").addClass("active");
				$("#" + id).show();
			});
		}); */
		
		function selectCardList(obj){
			var $this = $(obj);
			//alert($this);
			var $a = $("a",$this);
			var id = $a.attr("nav-id");
			
			$(".tab-pane").removeClass("active");
			$(".nav-li").removeClass("active");
			
			$("#" + id).addClass("active");
			$this.addClass("active");
		}
	</script>

	<script type="text/javascript" src="ace_v1.3/assets/js/jquery.maskedinput.js" charset="UTF-8"></script>
	<script type="text/javascript" src="js/jquery.tips.js" charset="UTF-8"></script>
</body>
</html>
